<template>
  <div style="background:#f1f1f1">
    <p @click="$router.back(-1)" class="back_p"><span><i class="el-icon-arrow-left"></i>返回</span><span>{{orgname}}</span></p>
    <el-table
      :data="assess3List"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>

      <el-table-column
        prop="hash.borgname"
        label="考核对象"
      >
      </el-table-column>
      <el-table-column
        prop="hash.year"
        label="年度"
      >
      </el-table-column>
      <el-table-column
        prop="hash.date"
        label="填报日期"
      >
      </el-table-column>
      <el-table-column
        prop="hash.statusname"
        label="状态"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <div v-if="belongunit!='3'">
            <el-button
              v-if="scope.row.hash.statusname=='已完成'"
              @click="getdetailList2(scope.row)"
              type="primary"
              size="small"
            >
              查看
            </el-button>
            <el-button
              @click="edit(scope.row)"
              v-else-if="scope.row.hash.statusname=='草稿'"
              type="primary"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              @click="edit(scope.row)"
              v-else
              type="primary"
              size="small"
            >
              填报
            </el-button>
          </div>
          <div v-else>
            <el-button
              v-if="scope.row.hash.statusname=='已完成'"
              @click="getdetailList2(scope.row)"
              type="primary"
              size="small"
            >
              查看
            </el-button>
            <el-button
              v-else
              size="small"
              @click="cannotsee"
            >
              查看
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="编辑"
      :visible.sync="showDetail"
      width="80%"
    >
      <el-table
        ref="filterTable"
        :data="detailList"
      >
        <!-- <el-table-column
          label="指标类型"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hash.ntype=== '1'">加分项</span>
            <span v-else>减分项</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="hash.nclassifyname"
          label="指标分类"
        >
        </el-table-column>
        <el-table-column
          width="140"
          label="指标名称"
        >
          <template slot-scope="scope">
            {{scope.row.hash.nname}}
            <el-tooltip class="item" effect="dark" popperClass="tip1" :content="scope.row.hash.ntext"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="分值上限"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hash.nvalue=='999'">不限</span>
            <span v-else>{{scope.row.hash.nvalue}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="得分"
          width="140"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hash.ntype=== '2'"> — </span>
            <el-input v-model="scope.row.hash.score" type="number" :max="scope.row.hash.nvalue" v-validate="'required'"
              name="分值" @input="((val)=>{isout(val,scope.row)})" min="0"
              style="width:70%"
            ></el-input>
            <div style="font-size:11px;color:#f60">{{ errors.first('分值') }}</div>
          </template>

        </el-table-column>
        <el-table-column
          width="300"
          label="说明"
        >
          <template slot-scope="scope">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="scope.row.hash.remark"
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="附件"
          width="200"
          style="overflow:auto"
        >
          <!-- <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="getloadList(scope.row)"
            >
              查看
            </el-button>
          </template> -->
          <template slot-scope="scope">
            <el-upload
              class="upload-demo"
              action="url"
              :fileList="scope.row.hash.filelist"
              multiple
              :limit="3"
              :autoUpload="false"
              :onChange="((file,fileList)=>{changefileList(file,fileList, scope.row)})"

              ref="upload"
              :httpRequest="upload3"
              :onRemove="((file)=>{removeImg3(file,scope.row)})"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column
          prop="hash.n_process"
          label="关联项目完成情况"
        >
          <template slot-scope="scope">
            项目平均完成率：{{scope.row.hash.n_process}}%
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveEdit">暂 存</el-button>
        <el-button type="primary" @click="sumitEdit">提 交</el-button>
      </span>
      <el-dialog
        width="30%"
        title="作证材料"
        :visible.sync="showDetail2"
        appendToBody
      >
        <el-table
          :data="loadList"
        >

          <el-table-column
            prop="hash.fname"
            label="附件名称"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <a :href="scope.row.hash.furl">下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>


    <el-dialog
      title="查看"
      :visible.sync="checkdetail"
      width="80%"
    >
      <el-table
        ref="filterTable"
        :data="detailList2"
      >
        <!-- <el-table-column
          label="指标类型"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hash.ntype=== '1'">加分项</span>
            <span v-else>减分项</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="hash.nclassifyname"
          label="指标分类"
        >
        </el-table-column>
        <el-table-column
          width="140"
          label="指标名称"
        >
          <template slot-scope="scope">
            {{scope.row.hash.nname}}
            <el-tooltip class="item" effect="dark" popperClass="tip1" :content="scope.row.hash.ntext"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="分值上限"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hash.nvalue=='999'">不限</span>
            <span v-else>{{scope.row.hash.nvalue}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="得分"
          width="140"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hash.ntype== '2'"> — </span>{{scope.row.hash.score}}
          </template>
        </el-table-column>
        <el-table-column
          prop="hash.remark"
          label="说明"
        >
        </el-table-column>

        <el-table-column
          label="附件"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="getloadList(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="hash.n_process"
          label="关联项目完成情况"
        >
          <template slot-scope="scope">
            项目平均完成率：{{scope.row.hash.n_process}}%
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="30%"
        title="作证材料"
        :visible.sync="showDetail2"
        appendToBody
      >
        <el-table
          :data="loadList"
        >

          <el-table-column
            prop="hash.fname"
            label="附件名称"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <a :href="scope.row.hash.furl">下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      belongunit: localStorage.getItem('belongunit'),
      ts: this.newStore(),
      assess3List: [],
      detailList: [],
      detailList2: [],
      fileList: [],
      loadList: [],
      oldFileName: [],
      newFileUrl: [],
      showDetail: false,
      showDetail2: false,
      checkdetail: false,
      orgname: `${this.$route.query.name} / ${this.$route.query.orgname}`,
    };
  },
  created() {
    this.getassess3List();
  },
  methods: {
    isout(val, item) {
      if (val > Number(item.hash.nvalue)) {
        this.$message({
          message: '得分不能超过分值上限',
          type: 'error',
        });
      } else if (val < 0) {
        this.$message({
          message: '得分不能小于0',
          type: 'error',
        });
      }
    },
    cannotsee() {
      this.$message({
        message: '该状态下不可查看！',
        type: 'info',
      });
    },
    sumitEdit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          for (let i = 0; i < this.detailList.length; i += 1) {
            if (Number(this.detailList[i].hash.score) > Number(this.detailList[i].hash.nvalue)) {
              this.$message({
                message: '请检查，得分不能超过分值上限',
                type: 'error',
              });
              return false;
            } else if (Number(this.detailList[i].hash.score) < 0) {
              this.$message({
                message: '请检查，得分不能小于0',
                type: 'error',
              });
              return false;
            }
          }
          const promiselist2 = [];
          for (let i = 0; i < this.detailList.length; i += 1) {
            const req = {
              handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BCA84805E79423194912542CE513CBE21',
              score: this.detailList[i].hash.score,
              remark: this.detailList[i].hash.remark,
              status: '1',
              taskid: this.detailList[i].hash.id,
              oldFileName: this.detailList[i].hash.oldFileName,
              newFileUrl: this.detailList[i].hash.newFileUrl,

            };
            promiselist2.push(this.spost(this.ts, '/mainservlet', req).then(() => {
              this.showDetail = false;
            }));
          }
          Promise.all(promiselist2).then(() => {
            this.$message({
              message: '提交成功！',
              type: 'success',
            });
            this.getassess3List();
          });
        } else {
          this.$message.error('内容不能为空或不符合规则！');
          return false;
        }
      });
    },
    removeImg3(file, item) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
      console.log(file);
      item.hash.oldFileName.splice(item.hash.oldFileName.indexOf(file.name), 1);
      item.hash.newFileUrl.splice(item.hash.oldFileName.indexOf(file.name), 1);
      console.log(item);
    },
    upload3(flieData, item) {
      console.log(item);
      const req = {};
      req.oriFileName = flieData.name;
      req.value = flieData.data;
      this.spost(this.ts, '/upload2.jsp', req).then((ts) => {
        if (item.hash.oldFileName) {
          item.hash.oldFileName.push(ts.d.oldFileName);
          item.hash.newFileUrl.push(ts.d.newFileUrl);
        } else {
          item.hash.oldFileName = [];
          item.hash.newFileUrl = [];
          item.hash.oldFileName.push(ts.d.oldFileName);
          item.hash.newFileUrl.push(ts.d.newFileUrl);
        }
        console.log(item);
      });
      // for (let i = 0; i < this.fileList.length; i += 1) {
      //   const req = {};
      //   req.oriFileName = this.fileList[i].name;
      //   req.value = this.fileList[i].data;
      //   this.spost(this.ts, '/upload2.jsp', req).then((ts) => {
      //     item.hash.oldFileName.push(ts.d.oldFileName);
      //     item.hash.newFileUrl.push(ts.d.newFileUrl);
      //   });
      // }
    },
    changefileList(file, fileList, item) {
      console.log(file);
      console.log(fileList);
      console.log(item);
      const flieData = {};
      file = file.raw;
      const fileType = file.type;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (event) => {
        const a = event.target.result;
        const sendData = a.replace(`data:${fileType};base64,`, '');
        flieData.name = file.name;
        flieData.data = sendData;
        // this.fileList.push(flieData);
        this.upload3(flieData, item);
      };
    },
    getloadList(item) {
      this.showDetail2 = true;
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B7C366576706DB4F48DE1C2E19369CBFBBFF0B9210751F692',
        taskid: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.loadList = ts.d.data.operation1;
      });
    },
    saveEdit() {
      for (let i = 0; i < this.detailList.length; i += 1) {
        if (Number(this.detailList[i].hash.score) > Number(this.detailList[i].hash.nvalue)) {
          this.$message({
            message: '请检查，得分不能超过分值上限',
            type: 'error',
          });
          return false;
        } else if (Number(this.detailList[i].hash.score) < 0) {
          this.$message({
            message: '请检查，得分不能小于0',
            type: 'error',
          });
          return false;
        }
      }
      const promiselist = [];
      for (let i = 0; i < this.detailList.length; i += 1) {
        const req = {
          handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BCA84805E79423194912542CE513CBE21',
          score: this.detailList[i].hash.score,
          remark: this.detailList[i].hash.remark,
          status: '0',
          taskid: this.detailList[i].hash.id,
          oldFileName: this.detailList[i].hash.oldFileName,
          newFileUrl: this.detailList[i].hash.newFileUrl,

        };
        promiselist.push(this.spost(this.ts, '/mainservlet', req).then(() => {
          this.showDetail = false;
        }));
      }
      Promise.all(promiselist).then(() => {
        this.$message({
          message: '暂存成功！',
          type: 'success',
        }); this.getassess3List();
      });
    },
    edit(item) {
      this.showDetail = true;
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B7C366576706DB4F4DF48646BA6C3FA56',
        aorgid: item.hash.aorgid,
        borgid: item.hash.borgid,
        propertyid: item.hash.propertyid,
        time: item.hash.time,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.detailList = ts.d.data.operation1;
        for (let i = 0; i < this.detailList.length; i += 1) {
          this.detailList[i].hash.filelist = [];
          let n = [];
          if (this.detailList[i].hash.filename !== '') {
            n = this.detailList[i].hash.filename.split(',');
          }
          const u = this.detailList[i].hash.fileurl.split(',');
          for (let j = 0; j < n.length; j += 1) {
            const a = {};
            a.name = n[j];
            a.url = u[j];
            this.detailList[i].hash.filelist.push(a);
            // 往数据里放
            if (this.detailList[i].hash.oldFileName) {
              this.detailList[i].hash.oldFileName.push(n[j]);
              this.detailList[i].hash.newFileUrl.push(u[j]);
            } else {
              this.detailList[i].hash.oldFileName = [];
              this.detailList[i].hash.newFileUrl = [];
              this.detailList[i].hash.oldFileName.push(n[j]);
              this.detailList[i].hash.newFileUrl.push(u[j]);
            }
          }
        }
        console.log(this.detailList);
      });
    },
    getdetailList2(item) {
      this.checkdetail = true;
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B7C366576706DB4F4DF48646BA6C3FA56',
        aorgid: item.hash.aorgid,
        borgid: item.hash.borgid,
        propertyid: item.hash.propertyid,
        time: item.hash.time,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.detailList2 = ts.d.data.operation1;
      });
    },
    getassess3List() {
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B7C366576706DB4F442052B8831706317BFF0B9210751F692',
        aorgid: this.$route.query.aorgid,
        borgid: this.$route.query.borgid,
        propertyid: this.$route.query.propertyid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.assess3List = ts.d.data.operation1;
        this.assess3List.forEach((element) => {
          [element.hash.year] = [element.hash.time.split('-')[0]];
          [element.hash.date] = [element.hash.time.substring(element.hash.time.indexOf('-') + 1)];
        });
      });
    },
  },
};
</script>

<style lang="stylus">
.el-upload-list__item-name
  max-width 200px
.tip1
  width 500px
  line-height 20px
.w_tip
  width 200px
  line-height 27px
  float left
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.back_p
  text-align center
  height 55px
  line-height 55px
  cursor pointer
  padding 0 30px
  background #fff
  box-shadow 0px 1px 5px #ccc
  span
    &:first-child
      float left
    &:last-child
      font-size 18px
      color #26a2ff
      padding-right 60px
.el-select
  width 14%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
